<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

    <title>Use HeadingPitchRoll</title>
    <script src="js/Cesium.js"></script>
    <!-- 如果要用沙盒里的东西的话加上这个 -->
    <script src="js/Sandcastle-header.js"></script>
    <!-- 一定要加上这个css样式 -->
    <link rel="stylesheet" href="css/bucket.css">
    <style>
        @import url(css/widgets.css);
    </style>
</head>
<body>
<div id="cesiumContainer" class="fullSize"></div>
<div id="toolbar">
    <!-- 这是Demo需要的侧边栏 -->
    <table class="infoPanel">
        <tbody>
        <tr>
            <td>Click on the 3D window then use the keyboard to change settings.</td>
        </tr>
        <tr>
            <td>Heading: <span id="heading"></span>°</td>
        </tr>
        <tr>
            <td>← to left/→ to right</td>
        </tr>
        <tr>
            <td>Pitch: <span id="pitch"></span>°</td>
        </tr>
        <tr>
            <td>↑ to up/↓ to down</td>
        </tr>
        <tr>
            <td>roll: <span id="roll"></span>°</td>
        </tr>
        <tr>
            <td>← + ⇧ left/→ + ⇧ right</td>
        </tr>
        <tr>
            <td>Speed: <span id="speed"></span>m/s</td>
        </tr>
        <tr>
            <td>↑ + ⇧ to speed up/↓ + ⇧ to speed down</td>
        </tr>
        <tr>
            <td>following aircraft
                <input id="fromBehind" type="checkbox">
            </td>
        </tr>
        </tbody>
    </table>
</div>

<script>
    var viewer = new Cesium.Viewer('cesiumContainer', {
        // terrainProviderViewModels : [], //Disable terrain changing
        infoBox : false, //Disable InfoBox widget
        selectionIndicator : false //Disable selection indicator
    });

    //Enable lighting based on sun/moon positions
    viewer.scene.globe.enableLighting = true;

/*    //Use STK World Terrain
    viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
        url : 'https://assets.agi.com/stk-terrain/world',
        requestWaterMask : true,
        requestVertexNormals : true
    });*/

    //Enable depth testing so things behind the terrain disappear.
    viewer.scene.globe.depthTestAgainstTerrain = true;

    //Set the random number seed for consistent results.
    Cesium.Math.setRandomNumberSeed(3);

    //Set bounds of our simulation time
    var start = Cesium.JulianDate.fromDate(new Date(2015, 2, 25, 16));
    var stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());

    //Make sure viewer is at the desired time.
    viewer.clock.startTime = start.clone();
    viewer.clock.stopTime = stop.clone();
    viewer.clock.currentTime = start.clone();
    viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; //Loop at the end
    viewer.clock.multiplier = 10;

    //Set timeline to simulation bounds
    viewer.timeline.zoomTo(start, stop);

    //Generate a random circular pattern with varying heights.
    function computeCirclularFlight(lon, lat, radius) {
        var property = new Cesium.SampledPositionProperty();
        for (var i = 0; i <= 360; i += 45) {
            var radians = Cesium.Math.toRadians(i);
            var time = Cesium.JulianDate.addSeconds(start, i, new Cesium.JulianDate());
            var position = Cesium.Cartesian3.fromDegrees(lon + (radius * 1.5 * Math.cos(radians)), lat + (radius * Math.sin(radians)), Cesium.Math.nextRandomNumber() * 500 + 1750);
            property.addSample(time, position);
        }

        property.setInterpolationOptions({
            interpolationDegree : 5,
            interpolationAlgorithm : Cesium.LagrangePolynomialApproximation
        });
        return property;
    }

    //Compute the entity position property.
    var position = computeCirclularFlight(-112.110693, 36.0994841, 0.03);

    //Actually create the entity
    var entity = viewer.entities.add({

        //Set the entity availability to the same interval as the simulation time.
        availability : new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
            start : start,
            stop : stop
        })]),

        //Use our computed positions
        position : position,

        //Automatically compute orientation based on position movement.
        orientation : new Cesium.VelocityOrientationProperty(position),

        //Load the Cesium plane model to represent the entity
        model : {
            uri : 'model/CesiumAir/Cesium_Air.glb',
            minimumPixelSize : 64
        }
    });

    //Set up chase camera
    var matrix3Scratch = new Cesium.Matrix3();
    var positionScratch = new Cesium.Cartesian3();
    var orientationScratch = new Cesium.Quaternion();
    function getModelMatrix(entity, time, result) {
        var position = Cesium.Property.getValueOrUndefined(entity.position, time, positionScratch);
        if (!Cesium.defined(position)) {
            return undefined;
        }
        var orientation = Cesium.Property.getValueOrUndefined(entity.orientation, time, orientationScratch);
        if (!Cesium.defined(orientation)) {
            result = Cesium.Transforms.eastNorthUpToFixedFrame(position, undefined, result);
        } else {
            result = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromQuaternion(orientation, matrix3Scratch), position, result);
        }
        return result;
    }

    var scratch = new Cesium.Matrix4();
    var camera =  viewer.scene.camera;
    viewer.scene.preRender.addEventListener(function(){
        getModelMatrix(entity, viewer.clock.currentTime, scratch);
        camera.lookAtTransform(scratch, new Cesium.Cartesian3(-10, 0, 2)); // MODIFY
    });
</script>

</body>
</html>
